<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">      
        <p>bookReadonly.name:{{bookReadonly.name}}</p>
        <p>bookReadonly.author.name:{{bookReadonly.author.name}}</p>
        <input type="button" value="修改" @click="changeName" >
    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>
<script>    

    // readonly 接收一个对象（响应式对象，普通对象）和ref。让其成为只读的，而且，只读是深层次的。

    // 原生中学习的const的只读，只限定变量对应的内存区域是只读的。
    const p = {
        name:"王义鑫"
    }

    p = {name:"罗怡欣"};//不能改的
    console.log("p.name",p.name);//王义鑫

    p.name = "张伟业";//可以
    console.log("p.name",p.name);//张伟业


    const {createApp,ref,reactive,readonly} = Vue;

    let app = createApp({
        setup(){

            let book = {
                name:"三国演义",
                author:{
                    name:"老罗",
                    address:"南窑头国际"
                }
            }

            let bookReactive = reactive(book);

            let bookRef = ref(book);

            // let bookReadonly = readonly(book);
            // let bookReadonly = readonly(bookReactive);
            let bookReadonly = readonly(bookRef);

            console.log("bookReadonly",bookReadonly);

            function changeName(){
                // bookReadonly.name +=1;
                // console.log("bookReadonly.name",bookReadonly.name);
                // bookReadonly.author.name += 1;
                // console.log("bookReadonly.author.name",bookReadonly.author.name);

                bookReadonly.value.name +=1;
                console.log("bookReadonly.value.name",bookReadonly.value.name);
                
            }
           
            return {
                bookReadonly,changeName
            }
        }
    })

    app.mount("#app");

</script>